<template>
  <div class="home-contatiner">
    <van-nav-bar
        title="首 页"
    />

    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img class="carousel-img" :src="image" alt=""/>
      </van-swipe-item>
    </van-swipe>

<!--图标-->
    <div class="navmenu">
      <ul>
        <li @click="goPage(item.key)" v-for="item in navmenulist">
          <van-icon :name="item.icon" />
          <span>{{ item.label }}</span>
        </li>
      </ul>
    </div>

    <div class="divider">
      <van-divider dashed align="center"></van-divider>
    </div>

    <template v-for="item in data.reverse()" >
      <div class="news-item" v-if="item.newsState"  @click="goPage(item.newsRouter)">

        <div class="news-top">
          <div class="news-id">公告编号：{{ item.newsId }}</div>
          <div class="news-time">{{ item.newsTime }}</div>
        </div>

        <div class="news-body">
          <div class="news-text">公告通知：{{ item.newsText }}</div>

          <div class="news-sender">
            发布者：{{ item.newsSender }}
            <!--          <div class="sum">¥{{ item.sum }}</div>-->
          </div>

        </div>

        <!--      <div class="action">-->
        <!--        <van-button size="mini" color="#f6b4aa" style="color: #000;" @click="">评价</van-button>-->
        <!--      </div>-->

      </div>
    </template>

    <div class="navbar-bottom"></div>


  </div>
</template>

<script setup>
import router from "@/router";
import axios from "axios";
import {onMounted, ref, watch} from "vue";


const images = [
  'https://ts1.cn.mm.bing.net/th/id/R-C.8f26770f97928c922a9ea3256532f1a8?rik=%2flyrKGkLA4AGaA&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2013%2f0922%2fshu3.jpg&ehk=FB3Jpp94A%2bR%2fve7tvkv2tR3wvc8IxHMLYbes%2fkZEf38%3d&risl=&pid=ImgRaw&r=0',
  'https://ts1.cn.mm.bing.net/th/id/R-C.e71020c709637de4bd0b96d3c7aa50b9?rik=w5SFarLizaR2Kg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140529%2f1-140529143K7.jpg&ehk=npIHrLX6sA9tu6squdUi0OwUcG0D4PI9aJZUcvnYhGA%3d&risl=&pid=ImgRaw&r=0',
];


const navmenulist = [
  {label: '通知', key: 'my', icon: 'volume-o'},
  {label: '考试', key: 'b', icon: 'records-o'},
  {label: '竞赛', key: 'c', icon: 'fire-o'},
  {label: '讨论', key: 'd', icon: 'comment-o'},
  {label: '奖励', key: 'comment', icon: 'award-o'},
  {label: '音乐', key: 'f', icon: 'music-o'},
  {label: '视频', key: 'e', icon: 'video-o'},
  {label: '设置', key: 'collect', icon: 'setting-o'},
  {label: '热线', key: 'a', icon: 'phone-circle-o'},
  {label: '反馈', key: 'collect', icon: 'question-o'},
];


// const data = [
//   {
//     newsId: '0',
//     newsTime: 'course_select',
//     newsText: '------------o',
//     newsSender: '3',
//     newsRouter: 'course_select',
//     newsState: 1,
//   },
//   {
//     newsId: '1',
//     newsTime: 'course_select',
//     newsText: '------------o',
//     newsSender: '3',
//     newsRouter: 'course_select',
//     newsState: 0,
//
//   },
// ]

let data = ref([]);


function getTableData(){
  // reset();
  axios.get("/inform/manage/getList").then((res) => {
    data.value = res.data;
  }).catch((err) => {

  });
}


//onMounted当页面加载时，显示数据
onMounted(() => {
  getTableData();

});


watch(data => {
  getTableData();
})




const goPage = (name) => {
  if (name === '') {
    return;
  }
  router.push({name})
}

</script>
<!--overflow-y:auto;overflow-x:hidden;-->

<style scoped lang="less">

.home-contatiner {

  box-sizing: border-box;
  background-color: #f2f5f8;
  height: 100%;
  width: 100%;

  .van-swipe .van-swipe-item {
    background-color: #c3daec;
    height: 205px;
    width: 100vw;
    padding: 0 ;
    border-radius: 0 0 8px 8px;
    text-align: center;
    overflow: hidden;
    transform: translateY(0);
  }

  .carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }



  .navmenu {
    padding-bottom: 5px;

    .van-icon{
      font-size: 24px;
      color:#757171;
    }
  }

  .navmenu ul {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    margin: 5px;
    border-radius: 10px;
  }

  .navmenu ul li {
    flex: 0 1 20%;
    text-align: center;
    margin: 14px 0;
    font-size: 15px;
  }

  .navmenu ul li span {
    font-size: 12px;
    display: block;
    color:#757171;
  }

  .divider{
    .van-divider{
      margin: 0px 40px 10px 40px;
      border-bottom: 1px solid #BFBFBF;
    }
  }




  .news-template{
    overflow: auto;
    position: relative;




  }
  .news-item {
    border-radius: 10px;
    background-color: #fff;
    padding: 4px 6px;
    margin: 0 6px 8px;

    //.action {
    //  display: flex;
    //  justify-content: flex-end;
    //  font-size: 12px;
    //  margin-top: 10px;
    //}

    .news-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #666;

      .news-id {
        font-size: 10px;
      }
      .news-time {
      }
    }

    .news-body {
      font-size: 14px;
      margin-top: 6px;
      overflow: hidden;

      //.sum {
      //  float: right;
      //  font-size: 15px;
      //  color: red;
      //}

      .news-text {
        font-size: 12px;
        text-overflow: ellipsis;
        color: #808080;
        margin-bottom: 7px;
      }

      .news-sender {
        font-size: 12px;
        color: #757171;
      }

    }

  }

.navbar-bottom{
  height: 50px;
  display: block;
  content: '';
}


}


</style>